<template>
  <base-container>
    <el-radio-group v-model="radioValue" size="large" @change="handleRadio">
      <el-radio-button v-for="item in radioOptions" :key="item.value" v-bind="item" />
    </el-radio-group>
    <section v-if="radioValue === '1'" class="mt-20px">
      <avue-table-search
        v-model="searchParams"
        :option="searchOption"
        @search-change="loadTableSearch"
        @search-reset="loadTableSearchReset"
      />
      <!-- 卡片容器 -->
      <base-table-card>
        <avue-crud
          v-model="formData"
          :data="tableData"
          :option="tableOption"
          :page="page"
          :table-loading="tableLoading"
          @refresh-change="loadGetTableData"
          @current-change="loadTablePageChange"
          @size-change="loadTablePageSizeChange"
          @row-save="loadAdd"
          @row-update="loadEdit"
        >
          <template #menu="{ row }">
            <el-button text type="primary" @click="handleOperation('1', row)">账户明细</el-button>
            <el-button text type="primary" @click="handleOperation('2', row)">线下转账入账</el-button>
            <el-dropdown>
              <el-button text type="primary">
                <span class="px-5px">更多</span>
                <i class="iconfont ic-xiajiantou"></i>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item
                    v-for="item in dropdownMenuOptions"
                    :key="item.value"
                    @click="handleDropdownItem(item.value)"
                    >{{ item.label }}
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </avue-crud>
      </base-table-card>
    </section>
    <section v-if="radioValue === '2'" class="mt-20px">
      <avue-table-search
        v-model="searchParams"
        :option="balanceDetailSearchOption"
        @search-change="loadTableSearch"
        @search-reset="loadTableSearchReset"
      />
      <!-- 卡片容器 -->
      <base-table-card>
        <avue-crud
          v-model="formData"
          :data="tableData"
          :option="balanceTableOption"
          :page="page"
          :table-loading="tableLoading"
          @refresh-change="loadGetTableData"
          @current-change="loadTablePageChange"
          @size-change="loadTablePageSizeChange"
          @row-save="loadAdd"
          @row-update="loadEdit"
        >
        </avue-crud>
      </base-table-card>
    </section>
    <base-dialog v-model="isShowRentCharge" :show-footer="false" title="租金充值" width="25%">
      <div class="p-10px">
        <el-form ref="rentChargeForm" :model="rentChargeParams" :rules="rentChargeRules" label-width="auto">
          <el-row :gutter="10">
            <el-col :span="24">
              <el-form-item label="店铺名称：" prop="shopName">
                <el-input v-model="rentChargeParams.shopName" placeholder="请输入店铺名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="订单编号：" prop="orderId">
                <el-input v-model="rentChargeParams.orderId" placeholder="请输入订单编号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="费用类型：" prop="feeType">
                <el-select v-model="rentChargeParams.feeType" placeholder="请选择费用类型">
                  <el-option label="请选择费用类型" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="金额：" prop="amount">
                <el-input v-model="rentChargeParams.amount" placeholder="请输入金额"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注">
                <el-input v-model="rentChargeParams.remark" placeholder="请输入备注" type="textarea"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="text-center">
          <el-button @click="isShowRentCharge = false">取消</el-button>
          <el-button type="primary" @click="handleRentChargeSubmit">确定</el-button>
        </div>
      </div>
    </base-dialog>
    <base-dialog v-model="isShowTransfer" :show-footer="false" title="线下转账申请" width="30%">
      <div class="px-20px">
        <el-form
          ref="transferFormRef"
          :model="transferParams"
          :rules="transferRules"
          label-position="top"
          label-width="auto"
        >
          <el-row :gutter="20">
            <el-col :span="24" class="transfer-account-container">
              <el-form-item label="转账账户(可多选)：" prop="accounts">
                <el-checkbox-group v-model="transferParams.accounts">
                  <span
                    v-for="(item, index) in accountsOptions"
                    :key="item.value"
                    :class="index === 1 ? 'pl-245px' : ''"
                  >
                    <el-checkbox :label="item.label" :value="item.value" />
                  </span>
                </el-checkbox-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                v-if="transferParams.accounts && transferParams.accounts.includes('01')"
                label=""
                prop="amount"
              >
                <el-input v-model="transferParams.amount" placeholder="请输入资金账号金额">
                  <template #append>元</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                v-if="transferParams.accounts && transferParams.accounts.includes('02')"
                label=""
                prop="purchaseAmount"
              >
                <el-input v-model="transferParams.purchaseAmount" placeholder="请输入采购账号金额">
                  <template #append>元</template>
                </el-input>
              </el-form-item>
            </el-col>
            <!-- 转账日期 -->
            <el-col :span="12">
              <el-form-item label="转账日期：" prop="transferTime">
                <el-date-picker
                  v-model="transferParams.transferTime"
                  placeholder="选择日期"
                  style="width: 100%"
                  type="date"
                  value-format="yyyy-MM-dd"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <!-- 转账单号 -->
            <el-col :span="12">
              <el-form-item label="转账单号：" prop="transferNumber">
                <el-input v-model="transferParams.transferNumber" placeholder="请输入转账单号" />
              </el-form-item>
            </el-col>
            <!-- 转账方名称 -->
            <el-col :span="12">
              <el-form-item label="转账方名称：" prop="transferName">
                <el-input v-model="transferParams.transferName" placeholder="请输入转账方名称" />
              </el-form-item>
            </el-col>
            <!-- 转账方银行 -->
            <el-col :span="12">
              <el-form-item label="转账方银行：" prop="transferBank">
                <el-input v-model="transferParams.transferBank" placeholder="请输入转账方银行" />
              </el-form-item>
            </el-col>
            <!-- 转账方银行账号 -->
            <el-col :span="12">
              <el-form-item label="转账方银行账号：" prop="transferBankAccount">
                <el-input v-model="transferParams.transferBankAccount" placeholder="请输入转账方银行账号" />
              </el-form-item>
            </el-col>
            <!-- 上传转账凭证 -->
            <el-col :span="24">
              <el-form-item label="上传转账凭证：" prop="fileList">
                <base-upload
                  v-model:file-list="transferParams.fileList"
                  :drag="false"
                  :http-request="handleHttpRequest"
                  :is-upload-mode="true"
                  :limit="3"
                  :mode="'upload'"
                  :show-file-list="true"
                  action="#"
                  list-type="picture-card"
                >
                  <el-button type="primary">选择文件</el-button>
                  <template #tip>
                    <div>请上传3张图片，请上传清晰图片，每张图片限制5MB内</div>
                  </template>
                </base-upload>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <div class="text-center">
                <el-button type="default" @click="handleCancelReview">取消</el-button>
                <el-button type="primary" @click="handleSubmitReview">提交审核</el-button>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </base-dialog>
  </base-container>
</template>
<script setup>
  import {
    tableOption,
    tabOptions,
    searchOption,
    rentChargeOptions,
    balanceDetailSearchOption,
    balanceTableOption,
  } from "@/crudOption/finance/business/CapitalAccount";
  import useCrudHook from "avue-table/useCrudHook";
  import { commonUpload } from "@/api/model/files.js";
  import { useRoute, useRouter } from "vue-router";

  const route = useRoute();
  const router = useRouter();

  // 增删改查 hook
  let {
    data: tableData,
    loading: tableLoading,
    page: page,
    search: searchParams,
    form: formData,
    get: loadGetTableData,
    add: loadAdd,
    edit: loadEdit,
    pageNumChange: loadTablePageChange,
    pageSizeChange: loadTablePageSizeChange,
    searchReset: loadTableSearchReset,
    searchChange: loadTableSearch,
  } = useCrudHook({
    get: Api.product.getAddressList,
    search: { status: "01" },
    getParamsFormat: params => {
      // // 开通时间
      // if (params.createTime && params.createTime.length === 2) {
      //   params.createTimeStart = params.createTime[0];
      //   params.createTimeEnd = params.createTime[1];
      //   delete params.createTime;
      // }
      // // 到期时间
      // if (params.expiredTime && params.expiredTime.length === 2) {
      //   params.expiredTimeStart = params.expiredTime[0];
      //   params.expiredTimeEnd = params.expiredTime[1];
      //   delete params.expiredTime;
      // }
      // // console.log(params, "params");
      // // 返回查询参数
      return params;
    },
    // add: Api.customer.AddCustomer,
    // edit: Api.customer.UpdateCustomer,
  });
  // 租金充值参数
  const rentChargeParams = ref({
    shopId: "9f20e747e002ed12dca62c311a1c757805b1ac08",
    feeType: 1,
    orderId: "1",
    amount: 12,
    remark: "1",
    shopName: "",
  });
  // 店铺名称配置
  const shopNameOptions = ref([]);
  // 转账form表单ref
  const transferFormRef = ref(null);
  // 租金充值表单验证
  const rentChargeForm = ref(null);
  // 租金充值表单验证规则
  const rentChargeRules = ref({
    shopName: [{ required: false, message: "请输入店铺名称", trigger: "blur" }],
    orderId: [{ required: true, message: "请输入订单编号", trigger: "blur" }],
    feeType: [{ required: true, message: "请选择费用类型", trigger: "change" }],
    amount: [{ required: true, message: "请输入金额", trigger: "blur" }],
    remark: [{ required: true, message: "请输入备注", trigger: "blur" }],
  });

  // 下拉菜单选项
  const dropdownMenuOptions = ref([
    {
      label: "租金充值",
      value: "1",
    },
  ]);
  //单选按钮选项
  const radioOptions = ref([
    { label: "商家账户列表", value: "1" },
    { label: "账户余额流水", value: "2" },
  ]);
  //单选按钮切换值
  const radioValue = ref("1");
  // 租金充值显示
  const isShowRentCharge = ref(false);
  // 线下转账入账显示
  const isShowTransfer = ref(false);
  // 线下转账入账参数
  const transferParams = ref({
    shopId: "9f20e747e002ed12dca62c311a1c757805b1ac08",
    transferNumber: "",
    transferName: "",
    transferBank: "",
    transferBankAccount: "",
    fileList: [],
    shopName: "",
  });
  // 线下转账账户参数项
  const accountsOptions = ref([
    { label: "资金账户金额", value: "01" },
    { label: "采购账户金额", value: "02" },
  ]);
  //线下转账申请参数验证
  const transferRules = ref({
    accounts: [{ required: true, message: "请选择转账账户", trigger: "blur" }],
    amount: [{ required: true, message: "请输入资金账号金额", trigger: "blur" }],
    purchaseAmount: [{ required: true, message: "请输入采购账号金额", trigger: "blur" }],
    transferTime: [{ required: true, message: "请选择转账日期", trigger: "blur" }],
    transferNumber: [{ required: true, message: "请输入转账单号", trigger: "blur" }],
    transferName: [{ required: true, message: "请输入转账方名称", trigger: "blur" }],
    transferBank: [{ required: true, message: "请输入转账方银行", trigger: "blur" }],
    transferBankAccount: [{ required: true, message: "请输入转账方银行账号", trigger: "blur" }],
    fileList: [{ required: true, message: "请上传转账凭证", trigger: "blur" }],
  });
  // 点击切换
  const handleRadio = value => {
    console.log(value);
  };
  // 点击下拉菜单
  const handleDropdownItem = value => {
    if (value === "1") {
      console.log("租金充值");
      isShowRentCharge.value = !isShowRentCharge.value;
      return false;
    }
  };
  // 操作按钮点击事件
  const handleOperation = (type, row) => {
    if (type === "1") {
      router.push({
        path: "/finance/manage/CapitalAccountDetail",
        query: {
          id: 1,
        },
      });
      return false;
    }
    if (type === "2") {
      isShowTransfer.value = !isShowTransfer.value;
      return false;
    }
  };
  // 提交审核
  const handleSubmitReview = () => {
    transferFormRef.value.validate(valid => {
      if (valid) {
        console.log(transferParams.value);
      } else {
        // transferFormRef.value.resetFields();
        // isShowTransfer.value = false;
      }
    });
  };
  // 取消审核
  const handleCancelReview = () => {
    transferFormRef.value.resetFields();
    isShowTransfer.value = false;
  };
  // 上传请求
  const handleHttpRequest = options => {
    let { file } = options;
    const formData = new FormData();
    formData.append("file", file);
    commonUpload(formData, { fileType: 2, isSecretFile: true }).then(res => {
      if (res.code == 200) {
        file.url = res.data;
      }
    });
    console.log(transferParams.value);
  };
  // 提交租金充值表单
  const handleRentChargeSubmit = () => {
    rentChargeForm.value.validate(valid => {
      if (valid) {
        console.log(rentChargeParams.value);
      }
    });
  };
  // 挂载时加载数据
  onMounted(() => {
    loadGetTableData().then(() => {
      tableData.value = [
        {
          shopId: "15333e01dbc1c05b40e3f4643e10d60e29b5f904",
          shopNo: "7741488",
          shopName: "11.5半托18073821201",
          afterAmount: -1301.29,
          enterpriseName: "11.5半托15011112122",
          purchaseAccountAmount: 6483.99,
          rentAccountBalanceAmount: 35.04,
        },
        {
          shopId: "0711e7980ca6eef53343dedb8e1b5f48c877adf9",
          shopNo: "8421744",
          shopName: "商家注册审核拒绝re17000000002",
          afterAmount: 0,
          enterpriseName: "17000000002企业名称re",
          purchaseAccountAmount: 0,
          rentAccountBalanceAmount: 0,
        },
        {
          shopId: "134e8e8d80881c1f6f47cdcac0d1b31f3e002828",
          shopNo: "5147184",
          shopName: "17000000007店铺名字",
          afterAmount: 0,
          enterpriseName: "17000000007企业名称",
          purchaseAccountAmount: 0,
          rentAccountBalanceAmount: 0,
        },
        {
          shopId: "cd4251e64c97b2df33a09a15fbbb3966a3ff63a0",
          shopNo: "6105811",
          shopName: "TSY测试租赁全托店铺13333333337",
          afterAmount: 0,
          enterpriseName: "TSY测试手机租赁全托店铺责任有限公司13333333337",
          purchaseAccountAmount: 0,
          rentAccountBalanceAmount: 0,
        },
        {
          shopId: "2b82db093ad717179810f60e5f49bc1d7527ff99",
          shopNo: "1594459",
          shopName: "TSY测试租赁手机全托店铺13333333338",
          afterAmount: 1771.1,
          enterpriseName: "TSY测试手机租赁全托店铺责任有限公司13333333338",
          purchaseAccountAmount: 0,
          rentAccountBalanceAmount: 0,
        },
        {
          shopId: "dec9569dee6dc936647a7c06e4cd35171a1218c0",
          shopNo: "8159692",
          shopName: "TSY测试租赁手机全托店铺1",
          afterAmount: -124.85,
          enterpriseName: "TSY测试租赁手机全托店铺1有限公司",
          purchaseAccountAmount: 0,
          rentAccountBalanceAmount: 0,
        },
        {
          shopId: "999cb5113a54cb62a2388cf0425d9c7d42b6a43b",
          shopNo: "8922323",
          shopName: "TSY测试个人租赁商品店铺13444444444",
          afterAmount: -38.15,
          enterpriseName: "TSY测试全托店铺13444444444",
          purchaseAccountAmount: 0,
          rentAccountBalanceAmount: 0,
        },
        {
          shopId: "383b964f1c33e5adc21a270045d1133b23a02fe6",
          shopNo: "6249094",
          shopName: "TSY测试环境半托店铺13466666666",
          afterAmount: 0,
          enterpriseName: "TSY测试环境半托店铺13466666666企业名称",
          purchaseAccountAmount: 0,
          rentAccountBalanceAmount: 0,
        },
        {
          shopId: "8dd7acc3a1c8d078b63fe849f4aba8d4982e531b",
          shopNo: "3997513",
          shopName: "测试店铺_1",
          afterAmount: 0,
          enterpriseName: "测试企业1",
          purchaseAccountAmount: 0,
          rentAccountBalanceAmount: 0,
        },
        {
          shopId: "644bc034666d6d8b2c00ede4807bee3c9c905e8f",
          shopNo: "7112690",
          shopName: "TSY测试店铺19012341234",
          afterAmount: 1312.85,
          enterpriseName: "TSY测试店铺19012341234企业名称",
          purchaseAccountAmount: 0,
          rentAccountBalanceAmount: -283.46,
        },
      ];
    });
  });
</script>
<style lang="scss" scoped>
  //.transfer-account-container{
  //  :deep(.el-form-item){
  //    margin-bottom: 0;
  //  }
  //}
</style>
